<template>
  <div class="page-container">
    <el-card shadow="never" class="search-form-card">
      <el-form class="search-form" inline label-width="75px" label-suffix=":">
        <el-row :gutter="50">
          <el-col :span="8">
            <el-form-item label="订单状态">
              <el-select v-model="searchParams.type" placeholder="请选择">
                <el-option
                  v-for="item in statusOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订阅时间">
              <el-date-picker
                v-model="searchParams.date"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="服务名称">
              <el-input v-model="searchParams.name" placeholder="请输入关键字" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary">查询</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <div class="table-box">
        <el-table
          v-loading="loading"
          stripe
          :data="tableData"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          @selection-change="onSelect"
        >
          <el-table-column
            v-for="item in columns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            align="center"
          />
          <el-table-column label="工具入口">
            <template>
              <el-button>工具入口</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="dialogEdit(scope.row)"
              >查看</el-button>
              <el-button
                type="text"
                color="#0DB493"
                @click="dialogDetail(scope.row)"
              >评价</el-button>
              <el-button
                type="text"
                color="#0DB493"
                @click="dialogDetail(scope.row)"
              >退订</el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <div class="page-box">
        <el-pagination
          background
          :current-page="pageNo"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @size-change="changePageSize"
          @current-change="changePageNo"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import crud from '@/mixins/crud'
export default {
  mixins: [crud],
  data() {
    return {
      searchParams: {
        date: [],
        status: ''
      },
      statusOptions: [
        {
          id: '1',
          name: '1'
        }
      ],
      columns: [
        { prop: '服务名称', label: '服务名称', width: '', minWidth: '' },
        { prop: '订阅时间', label: '订阅时间', width: '', minWidth: '' },
        { prop: '订单状态', label: '订单状态', width: '', minWidth: '' },
        { prop: '服务开通时间', label: '服务开通时间', width: '', minWidth: '' }
      ],
      tableData: [
        {
          p1: '深圳市新冠肺炎...',
          p2: '0109081_1',
          p3: 'API',
          p4: '失败',
          p5: '李丽',
          p6: 'TP001',
          p7: 'admin',
          p8: '2022/08/08 07:08:09',
          p9: '2022/08/08 07:08:09',
          p10: '调用接口失败'
        },
        {
          p1: '深圳市新冠肺炎...',
          p2: '0109081_1',
          p3: 'API',
          p4: '失败',
          p5: '李丽',
          p6: 'TP001',
          p7: 'admin',
          p8: '2022/08/08 07:08:09',
          p9: '2022/08/08 07:08:09',
          p10: '调用接口失败'
        },
        {
          p1: '深圳市新冠肺炎...',
          p2: '0109081_1',
          p3: 'API',
          p4: '失败',
          p5: '李丽',
          p6: 'TP001',
          p7: 'admin',
          p8: '2022/08/08 07:08:09',
          p9: '2022/08/08 07:08:09',
          p10: '调用接口失败'
        },
        {
          p1: '深圳市新冠肺炎...',
          p2: '0109081_1',
          p3: 'API',
          p4: '失败',
          p5: '李丽',
          p6: 'TP001',
          p7: 'admin',
          p8: '2022/08/08 07:08:09',
          p9: '2022/08/08 07:08:09',
          p10: '调用接口失败'
        },
        {
          p1: '深圳市新冠肺炎...',
          p2: '0109081_1',
          p3: 'API',
          p4: '失败',
          p5: '李丽',
          p6: 'TP001',
          p7: 'admin',
          p8: '2022/08/08 07:08:09',
          p9: '2022/08/08 07:08:09',
          p10: '调用接口失败'
        },
        {
          p1: '深圳市新冠肺炎...',
          p2: '0109081_1',
          p3: 'API',
          p4: '失败',
          p5: '李丽',
          p6: 'TP001',
          p7: 'admin',
          p8: '2022/08/08 07:08:09',
          p9: '2022/08/08 07:08:09',
          p10: '调用接口失败'
        }
      ]
    }
  },
  methods: {
    dialogDetail() {

    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  height: 100%;
}
</style>
